<template>
  <div class="appPage">
    <h3 class="tit">企业管理</h3>
   
    <div class="search">
      <div class="left">
        <span>appid</span>
        <el-input
          v-model="appid"
          placeholder="请输入appid"
          class="handle-input mr10"
          v-on:keyup.enter="handleSearch"
        ></el-input>
        <span>名称</span>
        <el-input
          v-model="name"
          placeholder="请输入子企业名称"
          class="handle-input mr10"
          v-on:keyup.enter="handleSearch"
        ></el-input>
        <span v-if="realname =='admin'">代理编号</span>
        <el-input
            v-model="userId"
            placeholder="请输入代理编号"
            class="handle-input mr10"
            v-on:keyup.enter="handleSearch"
            v-if="realname =='admin'"
        ></el-input>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="handleSearch"
          class="searchBtn"
          >查找</el-button
        >
      </div>
      <div class="right">
        <el-button
          class="reset"
          type="primary"
          icon="el-icon-refresh"
          @click="reset()"
          >重置</el-button
        >
        <el-button type="primary" class="add" @click="open()" v-if="realname =='admin'">添加</el-button>
      </div>
    </div>
    <div class="container">
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="30"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="userId"
          label="代理编号"
          align="center"
          v-if="realname =='admin'"
        ></el-table-column>
        <el-table-column
          prop="id"
          label="子企业编号"
          align="center"
          v-if="realname =='admin'"
        ></el-table-column>
        <el-table-column
          prop="appid"
          label="appid"
          align="center"
          v-if="realname =='admin'"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="子企业名称"
          align="center"
        ></el-table-column>

        <!--        <el-table-column label="账户余额">-->
        <!--          <template #default="scope">￥{{ scope.row.money }}</template>-->
        <!--        </el-table-column>-->
        
        <el-table-column
          prop="money"
          label="余额"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="seatMoney"
          label="套餐余额"
          align="center"
        ></el-table-column>

        <el-table-column
          prop="paramId"
          label="配置密钥"
          align="center"
          v-if="realname =='admin'"
        ></el-table-column>
        <el-table-column
          prop="rate"
          label="费率"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" width="500" align="center" style="dispaly:flex">
          <template #default="scope">
            <el-button type="primary" @click="recharge(scope)">充值</el-button>
            <el-button type="primary" @click="handleClick(scope)"  v-if="realname =='admin'">编辑</el-button>
            <el-button type="primary"  @click="lock(scope)" v-if="scope.row.status == '0'&& realname =='admin'">锁定</el-button>
            <el-button type="danger" @click="lock(scope)" v-if="scope.row.status == '1'&& realname =='admin'">解锁</el-button>
            <el-button type="primary" @click="opensay(scope)" v-if="realname =='admin'">话术</el-button>
            <el-button type="primary" @click="middleNum(scope)">中间号</el-button>
            <el-button type="primary" @click="details(scope)">详情</el-button>
            <el-button type="primary" :plain="false" @click="appidShow(scope)" v-if="realname !='admin'">appid</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="pageIndex"
          :page-size="pageSize"
          :total="pageTotal"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>
    <!-- 添加弹出框 -->
    <el-dialog title="添加" v-model="addVisible" width="30%">
      <el-form
        ref="dataAddForm"
        :model="form"
        :rules="addRules"
        label-width="90px">
        <el-form-item label="代理编号" prop="userId">
          <el-input v-model="form.userId"></el-input>
        </el-form-item>
        <el-form-item label="子企业名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="余额" prop="money">
          <el-input v-model="form.money"></el-input>
        </el-form-item>
        <el-form-item label="收费模式">
          <el-select v-model="form.chargeMode" placeholder="请选择收费模式">
            <el-option
              v-for="item in options"
              :key="item.chargeMode"
              :label="item.label"
              :value="item.chargeMode"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="通道类型">
          <el-select v-model="form.type" placeholder="请选择通道类型">
            <el-option
              v-for="item in options1"
              :key="item.type"
              :label="item.label1"
              :value="item.type"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="配置密钥">
          <el-select v-model="form.paramId"  placeholder="请选择配置密钥">
            <el-option
              v-for="item in options2"
              :key="item.type"
              :label="item.appid"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>


        <el-form-item label="限制坐席">
          <el-select v-model="form.seatPass"  placeholder="请选择是否限制">
            <el-option
              v-for="item in options3"
              :key="item.value3"
              :label="item.label3"
              :value="item.value3">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="行业" prop="industry">
          <el-input v-model="form.industry"></el-input>
        </el-form-item>
        <el-form-item label="月租">
          <el-input-number
            v-model="form.seatRate"
            :precision="1"
            :step="0.1"
            :max="1000"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="费率">
          <el-input-number
            v-model="form.rate"
            :precision="3"
            :step="0.001"
            :max="11"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addVisible = false">取 消</el-button>
          <el-button type="primary" @click="addSubmit()" :disabled="rechargeBtn">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 编辑弹出框 -->
    <el-dialog title="编辑" v-model="editVisible" width="30%">
      <el-form
        ref="dataAddForm"
        :model="form"
        :rules="editRules"
        label-width="100px">

        <el-form-item label="代理编号" prop="userId">
          <el-input v-model="form.userId"></el-input>
        </el-form-item>

        <el-form-item label="子企业名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>

        <el-form-item label="收费模式">
          <el-select v-model="form.chargeMode" placeholder="请选择收费模式">
            <el-option
              v-for="item in options"
              :key="item.chargeMode"
              :label="item.label"
              :value="item.chargeMode">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="通道类型">
          <el-select v-model="form.type"  placeholder="请选择通道类型">
            <el-option
              v-for="item in options1"
              :key="item.type"
              @change="changeType"
              :label="item.label1"
              :value="item.type">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="配置密钥">
          <el-select v-model="form.paramId"  placeholder="请选择配置密钥">
            <el-option
              v-for="item in options2"
              :key="item.type"
              :label="item.appid"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="限制坐席">
          <el-select v-model="form.seatPass"  placeholder="请选择是否限制">
            <el-option
              v-for="item in options3"
              :key="item.value3"
              :label="item.label3"
              :value="item.value3">
            </el-option>
          </el-select>
        </el-form-item>


        <el-form-item label="行业" prop="industry">
          <el-input v-model="form.industry"></el-input>
        </el-form-item>
        <el-form-item label="月租">
          <el-input-number
            v-model="form.seatRate"
            :precision="1"
            :step="0.1"
            :max="1000"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="费率">
          <el-input-number
            v-model="form.rate"
            :precision="3"
            :step="0.001"
            :max="1"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editVisible = false">取 消</el-button>
          <el-button type="primary" @click="editSubmit()">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 充值弹框 -->
    <el-dialog title="充值" v-model="addMoney" width="30%">
      <el-form
        ref="dataAddForm"
    
        :rules="addMoneyRules"
        label-width="80px">
      <el-form-item label="余额">
          <el-input-number
            v-model="formAdd"
            :precision="3"
            :step="1.00"
            :max="99999">
          </el-input-number>
        </el-form-item>
        <!-- 备注 -->
        <el-form-item label="备注">
          <el-input v-model="remarks" type="textarea"></el-input>
        </el-form-item>  
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addMoney = false">取 消</el-button>
          <el-button type="primary" @click="rechargeSubmit" :disabled="rechargeBtn">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 话术 -->
    <el-dialog title="话术" v-model="sayShow">
      <el-form
        ref="dataAddForm"
        :model="form"
        :rules="sayRules"
        label-width="80px"
      >
      <el-form-item label="话术">
          <el-input v-model="form.say" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="sayShow = false">取 消</el-button>
          <el-button type="primary" @click="submitTalk()">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 中间号 -->
    <el-dialog :title="'中间号数量:' + middleCount"  v-model="middleNumShow">
      <span style="font-size:18px">中间号单价:</span>
      <el-input-number
            v-model="middleNumPrice"
            :precision="2"
            :step="1"
            :max="50"
            :min="0"
          ></el-input-number>
      <el-input v-model="middleNums" type="textarea" :disabled="realname != 'admin'"></el-input>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="middleNumShow = false">取 消</el-button>
          <el-button type="primary" @click="submitMiddleNum()" v-if="realname =='admin'">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    
  </div>
</template>


<script>
import axios from "axios";
import { defineComponent } from 'vue'
import { ElMessage } from 'element-plus'
export default  defineComponent({

  //appid弹出消息
  setup() {
      return {
        appidShow(row) {
          // console.log(row.row.appid)
          ElMessage({
            message: row.row.appid,
            duration:3000,//显示时间，毫秒，为0时不消失
            showClose:true,//是否显示'×'
            type: 'success'//成功的样式
          });
        }
      }
    },


  name: "enterprises",
  data() {
    return {
      options: [
        {
          chargeMode: "0",
          label: "主叫呼叫开始计费",
        },
        {
          chargeMode: "1",
          label: "被叫应答计费",
        },
      ],
      chargeMode: "",

      options1: [
        {
          //和chargeMode相比少了"",仔细看获取的data数据，type和chargeMode是不一样的数据类型
          type: 0,
          label1: "隐私小号通道",
        },
        {
          type: 1,
          label1: "移动4通道",

        },
        {
          type: 2,
          label1: "移动1通道",
        },
        {
          type: 3,
          label1: "联通2通道",
        },
        {
          type: 4,
          label1: "联通1通道",
        },
        {
          type: 5,
          label1: "移动ax通道",
        },
        {
          type: 6,
          label1: "联通3通道",
        },
        {
          type: 7,
          label1: "联通4通道",
        },
        {
          type: 8,
          label1: "H",
        }
      ],
      options2:[],
      options3:[
        {
          value3:0,
          label3:"不使用坐席"
        },
        {
          value3:1,
          label3:"使用坐席"
        }
      ],
      realname:'',
      type: "",
      rate: 0,
      tableData: [],
      sayShow:false,//是否显示话术编辑框
      middleNumShow:false,//是否显示中间号编辑框
      addMoney:false,//是否显示充值弹窗
      addVisible: false, //是否显示添加弹窗
      editVisible: false, //是否显示编辑弹窗
      pageTotal: 0, //总共有多少数据
      pageIndex: 1, //当前在第几页
      pageSize: 10, //前端规定每页显示数量
      remarks:"",//备注（只传不回显）
      formAdd:"",
      appid:null,
      userId:null,
      form: {
        id: "",
        name: "",
        money: "",
        type: "",
        rate: "",
        appid:"",
        seatPass:'',//是否限制坐席0不使用坐席1使用
        seatRate:"",//月租
        chargeMode: "",
        industry: "",
        paramId:"",
        userId:"",
      },
      // middleNums:"0",
      editRules: {
        //校验规则
        name: [
          { required: true, message: "企业名称为必填项", trigger: "blur" },
        ],
        money: [{ required: true, message: "余额为必填项", trigger: "blur" }],
        type: [
          { required: true, message: "通道类型为必填项", trigger: "blur" },
        ],
        rate: [{ required: true, message: "费率为必填项", trigger: "blur" }],
      },
      page: 1, //接口请求的页数
      size: 10, //接口请求的每页的数量
      id: null,//搜索的id，如果为null，则显示全部数据
      name: null,
      title: "添加", //弹窗的标题
      btnText:'绑定',
      rechargeId:'',
      rechargeMoney:0,
      talkId:'',
      middleNums:'',//中间号数组
      middleCount:'',//中间号数量
      middleNumPrice:'',//中间号单价
      rechargeBtn:false
    };
  },
  created() {
    // this.form.userId = this.$route.query.userId;
    this.userId = this.$route.query.userId;
    this.realname = localStorage.getItem("realname"),
    this.getList();
  },
  //切换界面就执行方法
  activated(){
    this.getList()
  },
  watch: {
    // '$route': 'getParams',
    id() {
      if (this.id == "") {
        this.id = null;
      }
    },                  
    name() {
      if (this.name == "") {
        this.name = null;
      }
    },
    "form.type"(newValue, oldValue){
      this.options2 = []
      this.getData(newValue)
      console.log(this.form.paramId)
      this.form.paramId = ''
    },
    middleCount(){
      if(this.middleCount == null) {
        this.middleCount == 0;
      }
    },
    middleNumPrice(){
      if(this.middleNumPrice == null) {
        this.middleNumPrice == 0;
      }
    }
  },
  methods: {
    
    //点击通道类型时
    getData(type){
      // console.log(type)
      let params = {
        type:type
      }
      axios
        // .post("http://118.190.2.70:9999/vo/uuid/list", params)
        .post("http://118.190.2.70:9999/vo/uuid/findAllkey", params)
        .then((res) => {
          this.options2 = res.data.data
        })
        .catch((err) => {
          console.log(err);
        });
    },
    changeType(val){
      console.log(val)
    },
    // 分页导航
    handlePageChange(val) {
      this.page = val;
      this.getList();
    },
    getList() {
      let params = {
        page: this.page,
        size: this.size,
        appid: this.appid,
        name: this.name,
        userId:this.userId
      };
      axios
        // .post("http://118.190.2.70:9999/vo/uuid/list", params)
        .post("http://118.190.2.70:9999/vo/uuid/list", params)
        .then((res) => {
          this.tableData = res.data.data;
          this.pageTotal = res.data.total;
        })
        .catch((err) => {
          this.$message.error(err.data.message)
        });
    },
    //搜索
    handleSearch() {
      this.getList();  
    },
    //添加按钮
    open() {
        this.addVisible = true;
        this.form.userId = '',
        this.form.name = '';
        this.form.money = '';
        this.form.rate = '';
        this.form.seatRate = '';
        this.form.seatPass = '';
        this.form.type = '';
        this.form.paramId = '';
        this.form.chargeMode = '';
        this.form.industry = '';
        this.options2 = []
    },
    //点击编辑弹窗使用下面的方法(数据回显)
    handleClick(row) {
      this.form.id = row.row.id;
      console.log(row)
      this.editVisible = true; //弹窗解除隐藏状态跳出
      let params = {
        id: this.form.id,
      };
      axios
        .post("http://118.190.2.70:9999/vo/uuid/findOne", params)
        .then((res) => {
          console.log(res.data.data)
          this.form.chargeMode = res.data.data.chargeMode;//代理编号
          this.form.money = res.data.data.money;//余额
          this.form.name = res.data.data.name;//企业名称
          this.form.rate = res.data.data.rate;//费率
          this.form.seatRate = res.data.data.seatRate;//月租
          this.form.seatPass =res.data.data.seatPass;//是否限制坐席 0-不限制
          this.form.type = res.data.data.type;//通道类型
          this.form.industry = res.data.data.industry;//行业
          this.form.paramId = res.data.data.paramId;//密钥
          this.form.userId = res.data.data.userId;//所属代理的编号
          this.form.appid = res.data.data.appid;
          console.log(this.form.paramId)
        })
        .catch(err => {
          console.log(err)
        });
    },
    //重置按钮
    reset() {
      this.id = null;
      this.appid = null;
      this.name = null;
      this.userId = null;
      this.getList();
    },

    //添加确定
    addSubmit(){
      let params = {
        id:this.form.id,
        name:this.form.name,
        money:this.form.money,
        type:this.form.type,
        rate: this.form.rate,
        seatPass:this.form.seatPass,//是否限制坐席0不使用坐席1使用
        seatRate:this.form.seatRate,//月租
        chargeMode:this.form.chargeMode,
        industry: this.form.industry,
        paramId:this.form.paramId,
        userId:this.form.userId,
      }
      axios
      .post("http://118.190.2.70:9999/vo/uuid/add",params)
      .then(res =>{
        if (res.data.statusCode == "00000") {
              setTimeout(()=>{
            this.rechargeBtn = false
          },2000)
              this.$message.success(res.data.message)
              this.addVisible = false;
              this.getList();
            }else{
              this.$message.error(res.data.message)
              this.addVisible = false
              this.getList
            }
      })
      .catch(err =>{
            this.$message.error(err.data.message)
      })
    },
    //编辑确定
    editSubmit(){
      let params = {
        id:this.form.id,
        name:this.form.name,
        money:this.form.money,
        type:this.form.type,
        rate: this.form.rate,
        appid:this.form.appid,
        seatPass:this.form.seatPass,//是否限制坐席0不使用坐席1使用
        seatRate:this.form.seatRate,//月租
        chargeMode:this.form.chargeMode,
        industry: this.form.industry,
        paramId:this.form.paramId,
        userId:this.form.userId,
      }
      axios
      .post("http://118.190.2.70:9999/vo/uuid/update",params)
      .then(res =>{
        if (res.data.statusCode == "00000") {
              setTimeout(()=>{
            this.rechargeBtn = false
          },2000)
              this.$message.success(res.data.message)
              this.editVisible = false;
              this.getList();
            }else{
              this.$message.error(res.data.message)
              this.editVisible = false
              this.getList
            }
      })
      .catch(err =>{
            this.$message.error(err.data.message)
      })
    },


    //充值
    recharge(row){
      this.addMoney = true;
      this.rechargeId = row.row.id;
      this.rechargeMoney = row.row.money;
      this.appid = row.row.appid;
      this.name = row.row.name;
      this.formAdd = row.row.money;
      this.userId = row.row.userId;
      this.seatRate = row.row.seatRate;
    },
    //充值确定按钮
  rechargeSubmit(){
    let params = {
        id: this.rechargeId,
        money: this.formAdd,
        old_money:this.rechargeMoney,
        remarks:this.remarks,
        appid:this.appid,
        seatRate:this.seatRate,
        name:this.name,
        userId:this.userId
      }
      this.rechargeBtn = true
      axios
        // .post("http://118.190.2.70:9999/vo/uuid/update", params)
        .post("http://118.190.2.70:9999/vo/uuid/update", params)
        .then((res) => {
          // this.getList()
          setTimeout(()=>{
            this.rechargeBtn = false
          },2000)
          this.money = res.data.money
          this.appid = null
          this.name = null
          this.userId = null
          this.getList();
        })
        .catch((err) => {
          this.rechargeBtn = false
          console.log(err);
        })
      .finally(() => {
          this.addMoney = false
        })
},
    //绑定
    lock(row){
      let status = ""
      if(row.row.status == 1){
        status = 0
      }else{
        status = 1
      }
      let params = {
        id: row.row.id,
        status:status
      };

      this.$confirm('请确定是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {

      axios
        // .post("http://118.190.2.70:9999/vo/uuid/del", params)
        .post("http://118.190.2.70:9999/vo/uuid/del", params)
        .then((res) => {
          // console.log(res)
          if(res.data.statusCode == '00000'){
            this.$message.success(res.data.message)
            this.getList()
          }
        })
        .catch((err) => {
          console.log(err);
        });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
    },
    isEdit() {
      console.log(this.form);
      // return
      this.saveAdd();
    },
    //话术按钮
    opensay(row){
      //form.say双向绑定的是内容
      // console.log(row)
      this.form.say = row.row.talk
      this.talkId = row.row.id
      this.sayShow = true
    },
    //中间号回显
    middleNum(row){
      this.middleNum = null
      this.middleNumShow = true
      let params ={
        id:row.row.id
      }
      axios
      .post("http://118.190.2.70:9999/vo/uuid/findOne",params)
      .then(res =>{
        this.form.id = res.data.data.id
        //数量
        if(res.data.data.num == null ||res.data.data.num == ''){
              this.middleCount = 0
        }else{
              this.middleCount = res.data.data.num
        }
        //中间号
        this.middleNums = res.data.data.middleNum
        //单价
         if(res.data.data.price == null ||res.data.data.price == ''){
              this.middleNumPrice = 0
        }else{
              this.middleNumPrice = res.data.data.price
        }
      })
    },
    //中间号确定按钮
    submitMiddleNum(){
      let params = {
        id:this.form.id,
        middleNum:this.middleNums,
        price:this.middleNumPrice,
      }
      axios.post("http://118.190.2.70:9999/vo/uuid/updatePhone", params)
        .then((res) => {
          // console.log(res)
          if(res.data.statusCode == '00000'){
            this.middleNumShow = false
            this.$message.success(res.data.message)
            this.getList()
          }else{
            this.middleNumShow = false
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //话术提交按钮
    submitTalk(){
      let params = {
        id:this.talkId ,
        //把页面的内容赋值给talk，传回后端数据库
        talk:this.form.say
      }
      // axios.post("http://118.190.2.70:9999/vo/uuid/update", params)
      axios.post("http://118.190.2.70:9999/vo/uuid/update", params)
        .then((res) => {
          // console.log(res)
          if(res.data.statusCode == '00000'){
            this.sayShow = false
            this.$message.success(res.data.message)
            this.getList()
          }else{
            this.sayShow = false
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //详情按钮
    details(row){
      this.$router.push({
        path:'/audit',
        query: {
          companyName:row.row.name
        }
      });
    },
  },
});
</script>

<style scoped>
.tit {
  font-weight: normal;
  font-size: 36px;
  color: #333333;
}
.search {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.left {
  display: flex;
  align-items: center;
  margin-right: 30px;
}
.left span {
  width: 270px;
  text-align:center;
}
.searchBtn {
  margin-left: 15px;
  align-items: center;
}
.right {
  display: flex;
  justify-content: flex-end;
}
.reset {
  width: 80px;
  height: 34px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.add {
  margin-left: 15px;
}
.container {
  margin-top: 20px;
}
/* 话术编辑框高度设置 */
 /* .el-textarea__inner{
  min-height: 300px !important;
} */
div /deep/.el-table .cell{
  display: flex;
  justify-content: center;
}
</style>
